$(function () {
  initArtCateList();
  // 获取文章分类的列表
  function initArtCateList() {
    $.ajax({
      method: "GET",
      url: "/my/article/cates",
      success: function (res) {
        $("tbody").html(htmlStr);
        var htmlStr = template("tpl-table", res);
        // TODO 利用res做为数据，使用模板引擎渲染列表内容
        $("tbody").html(htmlStr);
      },
    });
  }
  var indexAdd = null;
  $(".layui-btn ").on("click", function () {
    indexAdd = layer.open({
      type: 1,
      area: ["500px", "300px"],
      title: "添加文章分类",
      content: $("#dialog-add").html(),
    });
  });
  //添加文章类
  $("body").on("submit", "#form-add", function (e) {
    e.preventDefault();
    $.ajax({
      method: "POST",
      url: "/my/article/addcates",
      data: $(this).serialize(),
      success: (res) => {
        if (res.status !== 0) {
          return layer.msg("新增分类失败");
        }

        layer.msg("新增分类成功");
        //  只能关闭打开某个图层的索引
        initArtCateList();
        layer.close(indexAdd);
      },
    });
  });
  // 删除文章
  // -1. 模板引擎中添加自定义属性indexl对象文章的id
  // -2. 给tbody事件委托
  $("tbody").on("click", ".btn-delete", function () {
    // 获取对应的id
    let id = $(this).attr("indexl");
    // 提示用户确实是否删除
    layer.confirm(
      "确认删除该文章",
      { icon: 3, title: "提示" },
      function (index) {
        //do something
        $.ajax({
          method: "GET",
          url: "/my/article/deletecate/" + id,
          success: (res) => {
            if (res.status !== 0) {
              return layer.msg(res.message);
            }
            initArtCateList();
          },
        });
        layer.close(index);
      }
    );
  });

  // 添加编辑功能
  // 事件委派
  var indexEdit = null;
  $("tbody").on("click", ".btn-edit", function () {
    // 弹出一个修改文章分类信息的层
    // 这里的遮罩层生成在body最后面
    indexEdit = layer.open({
      type: 1,
      area: ["500px", "250px"],
      title: "修改文章分类",
      content: $("#dialog-edit").html(),
    });
    // 获取对应的id
    let id = $(this).siblings(".btn-delete").attr("indexl");
    $.ajax({
      method: "GET",
      url: "/my/article/cates/" + id,
      success: (res) => {
        if (res.status !== 0) return layer.msg(res.message);
        // layui 的 form 方法
        layui.form.val("form-edit", res.data);
      },
    });
  });
  // 弹出遮罩层和遮罩层内的表单 ajax 请求为两个事件
  $("body").on("submit", "#form-edit", function (e) {
    // 阻止 form表单 的提交
    e.preventDefault();
    // 获取 form表单 内的数据
    let data = $(this).serialize();
    // 发送更新文章分类的请求
    $.ajax({
      method: "POST",
      url: "/my/article/updatecate",
      data,
      success: (res) => {
        if (res.status !== 0) return layer.msg(res.message);
        // 关闭遮罩层
        layer.close(indexEdit);
        //  重新渲染页面
        initArtCateList();
      },
    });
  });
});
